<template>
	<div>
		<el-dialog v-model="showdeliverView" width="400px" title="发货确认">
			<span>输入发货单号</span>
			<el-input type="text" v-model.lazy.trim="courierNum" maxlength="25"></el-input>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showdeliverView=false,this.deliverId=-1">取消</el-button>
					<el-button type="primary" @click="deliverOrder()">确认发货</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="showQueryRand" width="450px" title="按条件查询订单">
			<el-form ref="query">
				<el-date-picker type="daterange"
					range-separator="-"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					size="medium"
					style="width: 100%;"
					v-model="query.times"
					>
				</el-date-picker>
				<el-input placeholder="收货电话" style="margin-top: 10px;" v-model="query.phone"></el-input>
				<el-input placeholder="收货人" style="margin-top: 10px;" v-model="query.nickname"></el-input>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showQueryRand=false">取消</el-button>
					<el-button type="primary" @click="QueryOrders()">查询</el-button>
				</span>
			</template>
		</el-dialog>
		<el-row justify="space-between" style="margin-top: 1rem;">
			<el-col :span="10"><h1>所有客户的订单详情</h1></el-col>
			<el-col :span="3">
				<el-button @click="showQueryRand=true">按条件查询</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-table :data="findOrdInfo" style="width: 100%;">
				<el-table-column label="订单号" prop="ordid"/>
				<el-table-column label="电话" prop="phone"/>
				<el-table-column label="收货人" prop="nickname"/>
				<el-table-column label="总价" prop="amount"/>
				<el-table-column label="是否已付款" align="center">
					<template #default="scope">
						<label v-html="filterPay(scope.row.ispay)" 
						:style="{'color':(scope.row.ispay==1?'green':'red')}"></label>
					</template>
				</el-table-column>
				<el-table-column label="发货单号" prop="shipno"/>
				<el-table-column label="发货地址" prop="addr"/>
				<el-table-column label="下单时间" align="center">
					<template #default="scope">
						{{filterDate(scope.row.tcreate)}}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default="scope">
						<!-- 子组件-显示订单明细 -->
						<el-popover placement="left" width="600px" trigger="click">
							<template #reference>
							    <el-button size="small" 
									@click="getOrderInfoById(scope.row.ordid)">明细
								</el-button>
							</template>
							<p>{{scope.row.ordid}}#订单详情  发往：{{scope.row.addr}}</p>
							<el-table :data='OrderInfo' style="width: 100%;">
								<el-table-column label="图片">
									<template #default="scope">
										<el-avatar shape="square" 
											:src="`${$ServerUrl}/api/public/showImg/${scope.row.picture}`">
										</el-avatar>
									</template>
								</el-table-column>
								<el-table-column label="名称" prop="name"></el-table-column>
								<el-table-column label="单价" prop="price"></el-table-column>
								<el-table-column label="数量" prop="num"></el-table-column>
								<el-table-column label="小计" prop="">
									<template #default="scope">
										{{scope.row.price * scope.row.num}}
									</template>
								</el-table-column>
							</el-table>
						</el-popover>
						<el-button type="success" size="small" v-if="scope.row.ispay==1 && scope.row.shipno==''"
						@click="deliverId=scope.row.ordid,showdeliverView=true">发货</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row justify="center">
			<el-col :span="10" style="text-align: center;">
				  <el-pagination background layout="prev, pager, next" 
					  :total="total"
					  :page-size="num"
					  v-model:currentPage="page">
				  </el-pagination>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { ElMessage } from 'element-plus'
import qs from 'qs';
export default{
	name:'Order',
	data(){
		return {
			findOrdInfo:[],
			OrderInfo:[],
			total:0,
			num:10,//每页数量
			page:1,//当前页码
			deliverId:-1,//当前操作发货ID
			showdeliverView:false,//显示发货弹窗
			showQueryRand:false,//显示按条件查询弹窗
			courierNum:'',
			query:{
				times:'',
				phone:'',
				nickname:''
			}
		}
	},
	methods:{
		toNum(t){
			return t>=10 ? t: '0'+t;
		},
		//获取数据
		getData(){
			this.axios.post('/api/adm/ord/findOrdInfo/'+(this.page-1)+'/'+this.num).then((res)=>{
				if(res.status==200){
					this.findOrdInfo = res.data.data.orders;
					this.total = res.data.data.total;
				}
			}).catch((err)=>{
				//console.log(err);
			})
		},
		//获取指定订单编号的订单信息
		getOrderInfoById(id){
			this.OrderInfo = [];
			this.axios.post('/api/adm/ord/findItemInfoByOrdid/'+id).then((res)=>{
				if(res.status==200){
					if(res.data.code==200){
						this.OrderInfo = res.data.data;
					}
				}
			}).catch((err)=>{
				//console.log(err);
			})
		},
		//按照条件查询订单信息
		QueryOrders(){
			if(this.query.time=='' || this.query.phone=='' || this.query.nickname=='')return false;
			let arg = {
				ispay:1,
				tstart:new Date(this.query.times[0]).getTime(),
				tend:new Date(this.query.times[1]).getTime(),
				phone:this.query.phone,
				nickname:this.query.nickname
			}
			this.axios.post('/api/adm/ord/findOrdInfo/0/10',qs.stringify(arg)).then((res)=>{
				if(res.status==200){
					if(res.data.code==200){
						this.findOrdInfo = res.data.data.orders;
						this.total = res.data.data.total;
						this.showQueryRand = false;
					}else{
						this.PushMsg('error',res.data.msg);
					}
				}
			}).catch((err)=>{
				//console.log(err);
			})
		},
		//确认发货
		deliverOrder(){
			if(!this.courierNum || this.deliverId==-1)return false;
			//提交参数：订单ID,快递单号
			let arg = {"ordid":this.deliverId,"shipno":this.courierNum};
			this.axios.post('/api/adm/ord/addShip',arg).then((res)=>{
				if(res.status==200){
					//发货成功
					if(res.data.code==200){
						this.PushMsg('success',res.data.msg);
						//更新表格信息
						for(let item of this.findOrdInfo){
							if(item.ordid==this.deliverId){
								item.shipno = this.courierNum;
								//当前操作订单ID，快递单号设为默认值
								this.deliverId = -1;
								this.courierNum = '';
							}
						}
					}else{
						this.PushMsg('error',res.data.msg)
					}
				}
			}).catch((err)=>{
				//console.log(err);
			})
			this.showdeliverView=false;
			
		},
		//弹出消息提示
		PushMsg(type,message){
			if(type=='error'){
				ElMessage.error({
					message: message,
				})
			}else{
				ElMessage({
					message: message,
					type: type,
				})
			}
			
		}
	},
	watch:{
		page(){
			this.getData();
		}
	},
	computed:{
		filterPay(){
			return (x)=>{
				return Number(x) === 1 ? '已付':'未付'
			}
		},
		filterDate(){
			return (t)=>{
				let now = new Date(t);
				let year = now.getFullYear();
				let month = this.toNum(now.getMonth() + 1);
				let day = this.toNum(now.getDate());
				return `${year}-${month}-${day}`;
			}
		}
	},
	created() {
		this.getData();
	}
}
</script>

<style>
</style>
